<template>
  <div class="d_main">
    <!-- 操作区 S-->
    <div class="d_operationBox">
      <div class="d_btn">
        <el-radio-group
          v-model="productPlan"
          size="small"
          class="mr5"
          @change="changePlan"
        >
          <el-radio-button label="0">任务看板</el-radio-button>
          <el-radio-button label="1">生产明细</el-radio-button>
        </el-radio-group>
        <!-- <el-button
          v-show="productPlan === '1'"
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="showOrder = true"
        >新建
        </el-button> -->
        <el-button
          v-show="productPlan === '1'"
          size="small"
          @click="pullListCheck"
           v-permission="'MenuCode2-1-9'"
        >批量申请领料
        </el-button>
        <selectProductOrder :query-action="2" :per-visible.sync="showOrder" @current="selectCurrentRow" />
      </div>
      <div v-show="productPlan === '1'" class="d_search">
      <screec
          v-model="search.QueryDataBaseFiled"
          :headData.sync="tableHead"
          :disabled="searchLoading"
        ></screec>
        <el-input
          v-model="search.likeWords"
          placeholder="产品名称/订单号"
          size="small"
          @keyup.enter.native="getAllMaterils"
        >
          <el-button
            slot="append"
            :loading="searchLoading"
            type="primary"
            icon="el-icon-search"
            :disabled="searchLoading"
            element-loading-spinner="el-icon-loading"
            @click="getAllMaterils"
          >
            搜索
          </el-button>
        </el-input>
        <HeadSeting
            :list-data.sync="tableHead"
            :table-code="$config.saleorderlist"
            @reset="getTableHead"
          />
      </div>
    </div>
    <!-- 操作区 E-->
    <div v-show="productPlan == 0" class="taskBox">
      <div class="taskHead">
        <div v-for="(item, productPlanindex) in planStatus" :key="productPlanindex" class="item">
          {{ item }}({{ productPlanList[productPlanindex].length }})
        </div>
      </div>
      <div class="taskContent">
        <div v-for="(item , index) in productPlanList" :key="index" class="item">
          <ul>
            <li v-for="(listitem, listitemIndex) in productPlanList[index]" :key="listitemIndex" :class="getClass(listitem)" @click="toOrdereInfo(listitem)">
              <div class="tit">
                <h3>{{ listitem.orderProductName }}</h3>
              </div>
              <div class="nr">
                <dl>
                  <dt>订单编号</dt>
                  <dd>{{ listitem.xieYiShuHao }}</dd>
                </dl>
                <dl>
                  <dt>板面信息</dt>
                  <dd>{{ listitem.printingSurface + '_' + listitem.productVersions }}</dd>
                </dl>
              </div>
              <div class="time">
                <i class="el-icon-time" />
                <span>{{ listitem.expectedDeliveryTime }}日交货</span>
                <span>
                  {{ listitem.surplusDeliverGoodsDays > 0 ? '剩余' : '延期' }}
                  {{ listitem.surplusDeliverGoodsDays> 0 ? listitem.surplusDeliverGoodsDays : -listitem.surplusDeliverGoodsDays }}
                  天
                </span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--    高级搜索版块-->
    <div v-show="productPlan == 1" class="seniorSearch flex flex_between">
      <div />
      <div class="flex">
        <div class="mr15">
          <el-checkbox v-model="search.isShowCancelBills" @change="showCanStop">显示作废</el-checkbox>
        </div>
      </div>
    </div>
    <!--table板块-->
    <div v-show="productPlan == 1" ref="tableCon" class="tableCon">
      <el-table
        v-show="tableHead.length > 0"
        id="emtable"
        ref="multipleTable"
        v-loading="searchLoading"
        :data="allMaterirls"
        :height="tableHeight || 'auto'"
        border
        fit
        style="width: 100%"
        @header-dragend="surverWidth"
        @selection-change="handleSelectionChange"
      >
        <!-- 复选框       -->
        <el-table-column type="selection" width="40" fixed="left" :selectable="checkbox" />
        <template v-for="(fruit, index) in tableHead">
          <el-table-column
            v-if="fruit.visible"
            :key="index"
            :label="fruit.columnName"
            :min-width="fruit.columnWidth || 110"
            :prop="fruit.columnCode"
            show-overflow-tooltip
            :fixed="fruit.isFloat ? 'left' : false"
          >
            <template slot-scope="scope">
              <el-button v-if="fruit.columnCode === 'saleOrderNo'" type="text" @click="showProductDetal(scope.row)"> {{ scope.row[fruit.columnCode] }}</el-button>
              <el-button v-else-if="fruit.columnCode === 'produceTaskBillNo'" type="text" @click="showProduct(scope.row)"> {{ scope.row[fruit.columnCode] }}</el-button>
              <div v-else-if="fruit.columnCode==='produceBillStateName'" class="flex">
                <template v-if="scope.row.produceBillState===0">
                  <span class="mr5 spot" style="background: #3F61F1" />{{ scope.row[fruit.columnCode] }}
                </template>
                <template v-else-if="scope.row.produceBillState===1">
                  <span class="mr5 spot" style="background: #67C23A" />{{ scope.row[fruit.columnCode] }}
                </template>
                <template v-else>
                  <span class="mr5 spot" style="background: #999AAA" />{{ scope.row[fruit.columnCode] }}
                </template>
              </div>
              <div v-else-if="fruit.columnCode==='taskProduceStateName'" class="flex">
                <template v-if="scope.row.taskProduceState===0">
                  <span class="mr5 spot" style="background: #3F61F1" />{{ scope.row[fruit.columnCode] }}
                </template>
                <template v-else-if="scope.row.taskProduceState===1 || scope.row.taskProduceState===4">
                  <span class="mr5 spot" style="background: #67C23A" />{{ scope.row[fruit.columnCode] }}
                </template>
                <template v-else>
                  <span class="mr5 spot" style="background: #E13335" />{{ scope.row[fruit.columnCode] }}
                </template>
              </div>
              <template v-else>
                {{ scope.row[fruit.columnCode] }}
              </template>
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" width="70px" fixed="right" align="center">
          <template slot-scope="scope">
            <div>
              <el-popover
                :ref="`popover-${scope.$index}`"
                placement="bottom-end"
                popper-class="tableOp"
                width="160"
                :popper-options="{
                  boundariesElement: 'opBox',
                  removeOnDestroy: true,
                }"
                trigger="click"
              >
                <div class="operation">
                  <ul>
                    <li @click="showProduct(scope.row)">
                      查看
                    </li>
                    <li v-show="scope.row.produceBillState === 0" v-permission="'MenuCode2-1-11'" @click="handleUpdata(scope.row)">
                      修改
                    </li>
                  </ul>
                  <ul>
                    <li v-show="scope.row.produceBillState === 0" v-permission="'MenuCode2-1-12'" @click="handleConfirm(scope.row)">
                      确认
                    </li>
                  </ul>
                  <ul>
                    <li v-show="scope.row.taskProduceState === 1" v-permission="'MenuCode2-1-13'" @click="handleFixm(scope.row)">
                      生产补单
                    </li>
                  </ul>
                  <ul>
                    <li v-show="scope.row.produceBillState === 1" v-permission="'MenuCode2-1-14'" @click="handleRevocatio(scope.row)">
                      撤回
                    </li>
                  </ul>
                  <ul>
                    <li v-show="scope.row.taskProduceState === 1" v-permission="'MenuCode2-1-15'" @click="handleDone(scope.row)">
                      完成生产
                    </li>
                  </ul>
                  <ul>
                    <li v-show="scope.row.produceBillState === 0" v-permission="'MenuCode2-1-16'" @click="handleDelete(scope.row)">
                      删除
                    </li>
                    <li v-show="scope.row.taskProduceState === 0 && scope.row.produceBillState === 1" v-permission="'MenuCode2-1-17'" @click="handleCancelCheck(scope.row)">
                      作废
                    </li>
                    <li v-show="scope.row.produceBillState === 2" v-permission="'MenuCode2-1-18'" @click="handleReCopy(scope.row)">
                      复制
                    </li>
                    <li v-show="scope.row.taskProduceState === 2 || scope.row.taskProduceState === 1" v-permission="'MenuCode2-1-19'" @click="handleStop(scope.row)">
                      停工
                    </li>
                  </ul>
                </div>
                <div slot="reference" class="opBox pointer">
                  <span class="el-icon-more c_3F61F1" />
                </div>
              </el-popover>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 骨架屏     -->
      <div v-if="tableHead.length == 0" class="p16">
        <el-skeleton :rows="6" animated />
      </div>
    </div>
    <!-- 分页 S-->
    <div v-show="productPlan == 1" class="d_pag">
      <pagination
        :total="total||0"
        :page.sync="search.pageIndex"
        :limit.sync="search.pageSize"
        @pagination="getAllLists"
      />
    </div>
    <!-- 分页 E-->
    <!-- 作废原因   -->
    <el-dialog
      :title="'原因'"
      :visible.sync="reasonVisible"
      :close-on-click-modal="false"
      custom-class="comDialog"
      append-to-body
      width="30%"
      @close="closeCancelDialog"
    >
      <div class="dialogDody">
        <el-form
          ref="cancelForm"
          :rules="cancelFormrules"
          :model="cancelForm"
          label-width="0px"
          class="dialogForm"
        >
          <el-form-item label="" prop="cancelReason">
            <el-input
              v-model="cancelForm.cancelReason"
              type="textarea"
              :autosize="{ minRows: 5}"
              placeholder="请输入内容"
              size="mini"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="reasonVisible=false">取 消</el-button>
        <el-button
          :loading="addLableLoading"
          :disabled="addLableLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="saveReason"
        >保存</el-button>
      </div>
    </el-dialog>
    <!-- 停工原因   -->
    <el-dialog
      :title="'原因'"
      :visible.sync="stopVisible"
      :close-on-click-modal="false"
      custom-class="comDialog"
      append-to-body
      width="30%"
      @close="closeStopDialog"
    >
      <div class="dialogDody">
        <el-form
          ref="cancelForm"
          :model="cancelForm"
          label-width="0px"
          class="dialogForm"
        >
          <el-form-item label="" prop="reason">
            <el-input
              v-model="cancelForm.stopWorkReason"
              type="textarea"
              :autosize="{ minRows: 5}"
              placeholder="请输入内容"
              size="mini"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="stopVisible=false">取 消</el-button>
        <el-button
          :loading="addLableLoading"
          :disabled="addLableLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="saveStop"
        >保存</el-button>
      </div>
    </el-dialog>
    <!-- 批量领料 -->
    <el-dialog
      :title="'申请领料'"
      :visible.sync="isAddProduct"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="85%"
      @close="closeCp"
      @open="openCp"
    >
      <div class="dialogDody">
        <div class="subTip">
          <span class="mr15"><span class="mr5">缴库单号：</span>{{ ProductForm.handInBillNo || '系统自动生成' }}</span>
          <span class="mr15"><span class="mr5">创建日期：</span>{{ ProductForm.createDate || dayjs().format('YYYY-MM-DD') }}</span>
          <span><span class="mr5">创建人员：</span>{{ ProductForm.createPersonName ? ProductForm.createPersonName : name }}</span>
        </div>
        <div class="addWuliaoBox">
          <el-form
            ref="SCLLForm"
            :model="SCLLForm"
            :rules="llrules"
            label-width="110px"
            label-position="left"
            class="dialogForm dialogInlineForm"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="领料人员" prop="getMaterialPerson">
                  <div class="flex flex_center">
                    <div class="flex1">
                      <el-input v-model="SCLLForm.getMaterialName	" size="mini" placeholder="请选择人员">
                        <el-button slot="append" icon="el-icon-user" @click="isperShow=true" />
                      </el-input>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="领料备注" class="getMaterialRemark">
              <el-input v-model="SCLLForm.getMaterialRemark" type="textarea" :rows="1" placeholder="领料备注" size="mini" clearable />
            </el-form-item>
          </el-form>
          <div class="tableBox">
            <div class="tt flex flex_between">
              <span class="fw">申请领料明细</span>
            </div>
            <!-- <div ref="bigdialogTable" class="title tt bigdialogTable">
              <span>物料编号</span>
              <el-divider direction="vertical" />
              <span>物料类型</span>
              <el-divider direction="vertical" />
              <span>供应商</span>
              <el-divider direction="vertical" />
              <span>物料名称</span>
              <el-divider direction="vertical" />
              <span>规格型号</span>
              <el-divider direction="vertical" />
              <span>领料数量</span>
              <el-divider direction="vertical" />
              <span>物料单位</span>
              <el-divider direction="vertical" />
              <span>领料机台</span>
              <el-divider direction="vertical" />
              <span>备注</span>
            </div> -->
            <div class="tagCon">
                <div v-for="item in LLform" :key="item.productTagCode" class="tagList">
                  <div class="listNav flex">
                    <span class="pointer tagright" @click="shrink(item)">
                      <i v-if="!item.isShow" class="el-icon-arrow-down" />
                      <i v-else class="el-icon-arrow-up" />
                    </span>
                    <span class="f14 mlr15">生产单号: {{ item.billBaseData.produceTaskBillNo }}</span>
                    <span class="f14 mlr15">生产类型: {{ item.billBaseData.produceBillTypeName }}</span>
                    <span class="f14 mlr15">订单单号: {{ item.billBaseData.xieYiShuHao }}</span>
                    <span class="f14 mlr15">产品名称: {{ item.billBaseData.orderProductName }}</span>
                  </div>
                  <div v-show="!item.isShow" class="tagShow">
                    <el-table
                      :data="item.wlMxDataList"
                      style="width: 100%"
                      :show-header="true"
                    >
                      <el-table-column
                        prop="stockGoodsCode"
                        label="物料编码"
                        align="center"
                        width="144"
                      />
                      <el-table-column
                        prop="categoryName"
                        label="物料类型"
                        align="center"
                        width="144"
                      />
                      <el-table-column
                        prop="supplierName"
                        label="供应商"
                        align="center"
                        width="144"
                      />
                      <el-table-column
                        prop="goodsName"
                        label="物料名称"
                        align="center"
                        width="134"
                      />
                      <el-table-column
                        prop="stockGoodsName"
                        label="规格型号"
                        align="center"
                        width="144"
                      />
                      <el-table-column
                        prop="planMaterialQuantity"
                        label="领料数量"
                        align="center"
                        width="134"
                      />
                      <el-table-column
                        prop="goodsUnitName"
                        label="物料单位"
                        align="center"
                        width="134"
                      />
                      <el-table-column
                        prop="equipmentName"
                        label="领料机台"
                        align="center"
                        width="144"
                      />
                      <el-table-column
                        prop="produceMaterialRemark"
                        label="备注"
                        align="center"
                        width="auto"
                      />
                    </el-table>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddProduct=false">取 消</el-button>
        <!-- 新增       -->
        <el-button
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="saveLL"
        >保存</el-button>
      </div>
    </el-dialog>
    <per-redio-dialog :per-visible.sync="isperShow" @getEmployee="getEmployee" />
  </div>
</template>
<script>
import { arraySort } from '@/utils'
import HeadSeting from '@/components/HeadSeting'
import Pagination from '@/components/Pagination'
import selectProductOrder from '@/components/selectProductOrder'
import { mapGetters } from 'vuex'
import perRedioDialog from '@/components/perDialogRedio'
import screec from "@/components/screen";

export default {
  name: 'Materiel',
  components: { Pagination, HeadSeting, selectProductOrder, perRedioDialog,screec },
  data() {
    return {
      productFromLL: {
        orderTagDataList: [{}, {}]
      },
      productPlan: '0', // 1 任务看板 2 生产明细
      planStatus: ['待开单', '生产中', '待停工'],
      showOrder: false,
      productPlanList: [[], [], []],
      productTableList: [],
      tableHeight: null, // 表格最大高度
      isSeeMaterriel: false, // 查看弹框是否打开
      isAddMaterriel: false, // 新建弹框是否打开
      addMaterrielLoading: false, // 新建保存加载
      searchLoading: false, // 搜索加载效果
      allMaterirls: [], // 全部数据列表
      isDisable: null,
      addLableLoading: false,
      reasonVisible: false, //  报废
      stopVisible: false, // 停工
      devicesCodes: [],
      LLform: [],
      currentItem: null,
      pullList: [],
      isAddProduct: false,
      isperShow: false,
      ProductForm: {},
      SCLLForm: {
        getMaterialName: '',
        getMaterialPerson: '',
        getMaterialRemark: ''
      },
      llrules: {
        getMaterialPerson: [
          { required: true, message: '请选择人员', trigger: 'change' }
        ]
      },
      cancelFormrules: {
        cancelReason: [
          { required: true, message: '请输入原因', trigger: 'change' }
        ]
      },
      rules: {
        handInPersonName: [
          { required: true, message: '请选择人员', trigger: 'change' }
        ]
      },
      // 表格操作
      materForm: {
        indexNumber: 1000
      },
      cancelForm: {
        cancelReason: '',
        stopWorkReason: ''
      },
      // 搜索条件
      search: {
        QueryDataBaseFiled:'',
        pageIndex: 1,
        pageSize: 30,
        likeWords: '',
        isShowCancelBills: false
      },
      searchP: {
        pageIndex: 1,
        pageSize: 30,
        likeWords: '',
        customerCode: '',
        orderType: 0,
        queryCondition: 0,
        orderState: -1,
        produceState: -1,
        financeState: -1,
        deliveryState: -1
      }, // 销售订单搜索条件
      total: 0, // 总条数
      loading: null,
      tableHead: [] // 表格表头
    }
  },
  computed: {
    ...mapGetters(['name', 'userInfo'])
  },
  created() {
    //  所有列表数据
    this.getAllMaterils()
    // 表格得表头
    this.getTableHead()
    // this.productTableList = this.productPlanList.flat()
    this.getpanlist()

    this.loading = this.$loading({
      lock: true,
      text: '数据加载中',
      spinner: 'el-icon-loading',
      fullscreen: true,
      background: 'rgba(0, 0, 0, 0.7)'
    })
  },
  mounted() {
    // 表格高度
    this.calHeight()
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.multipleTable.doLayout()
    })
  },
  methods: {

    showCanStop(v) {
      this.getAllMaterils()
    },
    // 得到业务开单所有数据列表
    getpanlist() {
      // this.$api.business.GetWaitStopWorksSaleOrderDataList().then(res => {
      //   res.forEach(e => {
      //     this.productPlanList[2].push(e)
      //   })
      // }).catch(() => {
      // })
      // this.$api.business.GetInProductionsSaleOrderDataList().then(res => {
      //   res.forEach(e => {
      //     this.productPlanList[1].push(e)
      //   })
      // }).catch(() => {
      // })
      // this.$api.business.GetWaitOpenProduceBillsSaleOrderDataList().then(res => {
      //   res.forEach(e => {
      //     this.productPlanList[0].push(e)
      //   })
      // }).catch(() => {
      // })
      //  并发请求多个数据
      var that = this
      this.$axios.all([this.$api.business.GetWaitStopWorksSaleOrderDataList(),
        this.$api.business.GetInProductionsSaleOrderDataList(),
        this.$api.business.GetWaitOpenProduceBillsSaleOrderDataList()]).then(
        this.$axios.spread(function(res1, res2, res3) {
          res1.forEach(e => {
            that.productPlanList[2].push(e)
          })
          res2.forEach(e => {
            that.productPlanList[1].push(e)
          })
          res3.forEach(e => {
            that.productPlanList[0].push(e)
          })
          that.loading.close()
        })
      )
    },
    getClass(item) {
      if (item.surplusDeliverGoodsDays === 1) {
        return 'orgen'
      }
      if (item.surplusDeliverGoodsDays <= 0) {
        return 'dred'
      }
    },
    // 控制标签内容层显示隐藏
    shrink(item) {
      this.$set(item, 'isShow', !item.isShow)
    },
    changePlan(val) {
      this.productPlan = val
      this.calHeight()
    },
    // select 可选
    checkbox(row) {
      if (row.produceBillState !== 2 && row.produceBillState !== 0 && row.materialState !== 1 && row.taskProduceState !== 3) {
        return true
      } else {
        return false
      }
    },
    pullListCheck() {
      if (this.pullList.length <= 0) {
        this.$message({
          type: 'error',
          message: '请选择生产单!'
        })
        return
      }
      this.isAddProduct = true
    },
    handleSelectionChange(val) {
      this.pullList = val
    },
    saveLL() {
      this.$refs.SCLLForm.validate((valid) => {
        if (valid) {
          const parmas = Object.assign({}, this.SCLLForm)
          const _arr = []
          this.LLform.forEach(e => {
            e.wlMxDataList.forEach(wl => {
              var _data = {}
              var _wlMxDataList = []
              wl.applyGetQuantity = wl.planMaterialQuantity
              wl.getMaterialRemark = wl.produceMaterialRemark
              _data.saleOrderNo = e.billBaseData.saleOrderNo
              _data.produceTaskBillNo = e.billBaseData.produceTaskBillNo
              _data.equipmentNo = wl.equipmentNo
              // var a = e.wlMxDataList.find(item => item.equipmentNo === wl.equipmentNo)
              _wlMxDataList.push(wl)
              _data.mxDataList = _wlMxDataList
              _arr.push(_data)
            })
          })
          parmas.billDataList = _arr
          this.addProductLoading = true
          this.$api.product.CreateMoreGetProduceMaterialBills(parmas).then(() => {
            this.addProductLoading = false
            this.isAddProduct = false
            this.getAllMaterils()
            this.$message({
              message: '保存成功',
              type: 'success'
            })
          }).catch(() => {
            this.addProductLoading = false
          })
        }
      })
    },
    closeCp() {},
    openCp() {
      this.SCLLForm = {
        getMaterialName: this.userInfo.employeeName,
        getMaterialPerson: this.userInfo.employeeCode,
        getMaterialRemark: ''
      }
      const _nos = []
      this.pullList.forEach(e => {
        _nos.push(e.produceTaskBillNo)
      })
      this.$api.product
        .GetMoreProduceTaskMaterialList({
          produceTaskBillNos: _nos
        })
        .then((res) => {
          this.LLform = res
        })
        .catch(() => {
        })
    },
    getEmployee(val) {
      this.SCLLForm.getMaterialPerson = val.employeeCode
      this.SCLLForm.getMaterialName = val.employeeName
    },
    // 新建点击事件
    newAddClick() {
    },
    // 查看
    checkProductList(row) {
      this.$router.push({
        path: '/business/orderDetail', // 跳转的路径
        query: {
          tabIndex: 2,
          saleOrderNo: row.saleOrderNo
        }
      })
    },
    // 删除
    handleDelete(row) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.product
          .DeleteProduceTaskBill({
            produceTaskID: row.produceTaskID
          })
          .then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getAllMaterils()
          })
          .catch(() => {
          })
      })
    },
    handleCancelCheck(row) {
      this.currentItem = row
      this.cancelForm.cancelReason = ''
      this.reasonVisible = true
    },
    closeCancelDialog() {
      this.reasonVisible = false
    },
    closeStopDialog() {
      this.stopVisible = false
    },
    // 停工
    saveStop() {
      this.$api.product
        .StopProduceTaskBill({
          produceTaskID: this.currentItem.produceTaskID,
          cancelReason: this.cancelForm.stopWorkReason
        })
        .then((res) => {
          this.$message({
            type: 'success',
            message: '停工成功!'
          })
          this.stopVisible = false
          this.getAllMaterils()
        })
        .catch(() => {
        })
    },
    // 报废
    saveReason() {
      this.$refs.cancelForm.validate((valid) => {
        if (valid) {
          this.$api.product
            .CancelProduceTaskBill({
              produceTaskID: this.currentItem.produceTaskID,
              cancelReason: this.cancelForm.cancelReason
            })
            .then((res) => {
              this.$message({
                type: 'success',
                message: '报废成功!'
              })
              this.reasonVisible = false
              this.getAllMaterils()
            })
            .catch(() => {
            })
        }
      })
    },
    toOrdereInfo(e) {
      this.$router.push({
        path: '/production/orderProductionBilling', // 跳转的路径
        query: {
          orderID: e.saleOrderID
        }
      })
    },
    // 查看
    showProductDetal(row) {
      this.$router.push({
        path: '/production/orderProductionBilling', // 跳转的路径
        query: {
          saleOrderNo: row.saleOrderNo
        }
      })
      // this.$router.push({
      //   path: '/business/orderDetail', // 跳转的路径
      //   query: {
      //     tabIndex: 2,
      //     saleOrderNo: row.saleOrderNo
      //   }
      // })
    },
    showProduct(row) {
      this.$router.push({
        path: '/production/newproductionBilling', // 跳转的路径
        query: {
          produceTaskBillNo: row.produceTaskBillNo,
          produceTaskID: row.produceTaskID,
          typeStatus: 1
        }
      })
      // this.$router.push({
      //   path: '/production/productionBilling', // 跳转的路径
      //   query: {
      //     produceTaskBillNo: row.produceTaskBillNo,
      //     produceTaskID: row.produceTaskID,
      //     typeStatus: 1
      //   }
      // })
    },
    // 修改
    handleUpdata(row) {
      this.$router.push({
        path: '/production/newproductionBilling', // 跳转的路径
        query: {
          produceTaskBillNo: row.produceTaskBillNo,
          produceTaskID: row.produceTaskID,
          typeStatus: 2
        }
      })
      // this.$router.push({
      //   path: '/production/productionBilling', // 跳转的路径
      //   query: {
      //     produceTaskBillNo: row.produceTaskBillNo,
      //     produceTaskID: row.produceTaskID,
      //     typeStatus: 2
      //   }
      // })
    },
    // 确定
    handleConfirm(row) {
      this.$router.push({
        path: '/production/newproductionBilling', // 跳转的路径
        query: {
          produceTaskBillNo: row.produceTaskBillNo,
          produceTaskID: row.produceTaskID,
          typeStatus: 3
        }
      })
      // this.$router.push({
      //   path: '/production/productionBilling', // 跳转的路径
      //   query: {
      //     produceTaskBillNo: row.produceTaskBillNo,
      //     produceTaskID: row.produceTaskID,
      //     typeStatus: 3
      //   }
      // })
    },
    // 复制
    handleReCopy(item) {
      this.$router.push({
        path: '/production/newproductionBilling', // 跳转的路径
        query: {
          produceTaskBillNo: item.produceTaskBillNo,
          produceTaskID: item.produceTaskID,
          saleOrderNo: item.saleOrderNo,
          typeStatus: 5
        }
      })
    },
    // 撤回
    handleRevocatio(item) {
      this.$api.product
        .RevocationProduceTaskBill({
          produceTaskID: item.produceTaskID
        })
        .then((res) => {
          this.$message({
            type: 'success',
            message: '撤回成功!'
          })
          this.getAllMaterils()
        })
        .catch(() => {
        })
    },
    // 补单
    handleFixm(item) {
      this.$router.push({
        path: '/production/newproductionBilling', // 跳转的路径
        query: {
          produceTaskBillNo: item.produceTaskBillNo,
          typeStatus: 4
        }
      })
    },
    // 完成生产
    handleDone(item) {
      this.$api.product
        .FinishedProduceTaskBill({
          produceTaskID: item.produceTaskID
        })
        .then((res) => {
          this.$message({
            type: 'success',
            message: '完成成功!'
          })
          this.getAllMaterils()
        })
        .catch(() => {
        })
    },

    // 停工
    handleStop(item) {
      this.currentItem = item
      this.cancelForm.stopWorkReason = ''
      this.stopVisible = true
    },
    selectCurrentRow(row) {
      this.$router.push({
        path: '/production/newproductionBilling', // 跳转的路径
        query: {
          orderNo: row.orderNo,
          typeStatus: 0
        }
      })
      // this.$router.push({
      //   path: '/business/orderDetail', // 跳转的路径
      //   query: {
      //     tabIndex: 2,
      //     saleOrderID: row.orderID,
      //     saleOrderNo: row.orderNo
      //   }
      // })
      // this.$router.push({
      //   path: '/production/productionBilling', // 跳转的路径
      //   query: {
      //     isCreateNewOrder: true,
      //     orderNo: row.orderNo,
      //     typeStatus: 0
      //   }
      // })
    },
    //  修改设备
    modifyInfo(data) {
      this.materForm = Object.assign(data, {})
    },
    // 设备类型列表
    getProductCraftsFiles() {
      this.$api.system.GetProductDeviceList().then((res) => {
        this.devicesCodes = res
      })
    },
    getAllLists() {
      this.getAllMaterils()
    },
    // 详情
    getMaterielInfo(id) {},
    // 保存表头样式变化
    saveHead(newArray) {
      const parmas = newArray
      setTimeout(() => {
        this.$api.common.saveTableStyle(parmas).then(() => {})
      }, 300)
    },
    // 保存表头列宽度
    surverWidth(newWidth, oldWidth, column) {
      setTimeout(() => {
        const heads = [...this.tableHead]
        heads.forEach(item => {
          if (item.columnCode === column.property) {
            item.columnWidth = column.width
            return
          }
        })
        this.saveHead(heads)
      }, 100)
    },
    // 表格最大高度
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.tableCon.getBoundingClientRect()
        this.tableHeight = rect.height
      })
    },
    // ，清除所有查询条件
    Refresh() {
      this.search = this.$options.data().search
      this.getAllMaterils()
    },
    // 获取表格表头
    getTableHead() {
      const parmas = {
        tableCode: this.$config.producetaskbilllist
      }
      this.$api.common.getAllTableHead(parmas).then((res) => {
        res.sort(arraySort('columnSort'))
        this.tableHead = res
      })
    },
    // 所有列表数据
    getAllMaterils() {
      const parmas = this.search
      this.searchLoading = true
      this.$api.product
        .GetMatchPageProduceTaskBills(parmas)
        .then((res) => {
          this.allMaterirls = res.list
          this.allMaterirls.forEach((item)=>{
            for(let i in item){
              if(!item[i] && item[i] !== 0){
                item[i] = '--'
              }
            }
          })
          this.total = res.totalCount
          this.searchLoading = false
        })
        .catch(() => {
          this.searchLoading = false
        })
    },
    // 新建弹框关闭事件
    closeDialog() {
      if (this.$refs.materForm) {
        this.$refs.materForm.resetFields()
      }
      this.materForm = this.$options.data().materForm
    }
  }
}
</script>
<style lang="scss" scoped>

.container {
  height: 100%;
}
.permangeRg {
  border: 1px solid #e6e6e6;
  background: #fff;
  height: 100%;

  .mainTT {
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    padding: 18px 16px;
    padding-bottom: 0;
  }
  .p11 {
    padding: 10px;
  }
}
.warpper {
  height: 100%;
  overflow: hidden;

}
.cardcenter {
  height: 100%;
  width: 100%;
  overflow: hidden;
  .cardList {
    height: 100%;
    overflow: auto;
    background-color: #ebebeb;
    &:last-child {
      margin-right: 0;
    }
    .listitem {
      background: #ffffff;
      color: #999aaa;
      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
      border-radius: 4px;
      margin-bottom: 10px;
      line-height: 22px;
      border: 1px solid #eeeeee;
      .title {
        color: #333333;
      }
      .time {
        padding: 5px;
        background-color: #f5f6f9;
                &.orgen  {
          color: #eeeeee;
           background-color: #F57922;
        }
           &.dred {
             color: #eeeeee;
           background-color: #E13335;
        }
      }
    }
  }
}
.spot{
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 100%;
}
.addWuliaoBox {
  padding: 10px 16px;

  .tableBox {
    margin-top: 16px;
    border: 1px solid #e6e6e6;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    .bigdialogTable {
      span {
        display: inline-block;
        text-align: center;
        font-weight: bold;
        width: 122px;
      }
    }
    .tt {
      height: 38px;
      line-height: 38px;
      padding-left: 16px;
      background: #f7f8fa;
      border-radius: 8px 8px 0 0;
    }
    .title {
      border-radius: 0;
      border: 1px solid #E6E6E6;

    }
  }
}

.tagCon {
  width: 100%;
  flex: 1;
  overflow-x: hidden;
  border-top: 1px solid #e8e8e8;
  .tagList {
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid #e6e6e6;
    .listNav {
      height: 44px;
      padding: 0 14px;
      background: #F7F8FA;
      border-bottom: 1px solid #e6e6e6;
    }
    .tagShow {
      background-color: #ffffff;
    }
  }
}
.subTip {
  border-bottom: 1px #e6e6e6 solid;
  background: #f5f6f9;
  padding: 8px 16px;
}
</style>
<style lang="scss">
.el-loading-mask {
  top: 0;
}
</style>
